﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="raphael.js"></script>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
var canvas_r;
function getStartEnd(obj1, obj2) {
	var bb1 = obj1.getBBox(),
		bb2 = obj2.getBBox();
	var p = [
	{ x: bb1.x + bb1.width / 2, y: bb1.y - 1 },
	{ x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1 },
	{ x: bb1.x - 1, y: bb1.y + bb1.height / 2 },
	{ x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2 },
	{ x: bb2.x + bb2.width / 2, y: bb2.y - 1 },
	{ x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1 },
	{ x: bb2.x - 1, y: bb2.y + bb2.height / 2 },
	{ x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2 }
	];
	var d = {}, dis = [];
	for (var i = 0; i < 4; i++) {
		for (var j = 4; j < 8; j++) {
			var dx = Math.abs(p[i].x - p[j].x),
				dy = Math.abs(p[i].y - p[j].y);
			if (
						(i == j - 4) ||
						(((i != 3 && j != 6) || p[i].x < p[j].x) &&
						 ((i != 2 && j != 7) || p[i].x > p[j].x) &&
						 ((i != 0 && j != 5) || p[i].y > p[j].y) &&
						 ((i != 1 && j != 4) || p[i].y < p[j].y))
			   ) {
				dis.push(dx + dy);
				d[dis[dis.length - 1]] = [i, j];
			}
		}
	}
	if (dis.length == 0) {
		var res = [0, 4];
	} else {
		res = d[Math.min.apply(Math, dis)];
	}
	var result = {};
	result.start = {};
	result.end = {};
	result.start.x = p[res[0]].x;
	result.start.y = p[res[0]].y;
	result.end.x = p[res[1]].x;
	result.end.y = p[res[1]].y;
	return result;
}
function getArr(x1, y1, x2, y2, size) {
	var angle = Raphael.angle(x1, y1, x2, y2);
	var a45 = Raphael.rad(angle - 45);
	var a45m = Raphael.rad(angle + 45);
	var x2a = x2 + Math.cos(a45) * size;
	var y2a = y2 + Math.sin(a45) * size;
	var x2b = x2 + Math.cos(a45m) * size;
	var y2b = y2 + Math.sin(a45m) * size;
	var result = ["M", x1, y1, "L", x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b];
	return result;
}
Raphael.fn.drawArr = function (obj) {
	var point = getStartEnd(obj.obj1, obj.obj2);
	var path1 = getArr(point.start.x, point.start.y, point.end.x, point.end.y, 8);
	var circle_x = (point.end.x+point.start.x)/2;
	var circle_y = (point.end.y+point.start.y)/2; 
	if (obj.arrPath) {
		obj.arrPath.attr({ path: path1 });
		obj.circle.attr({"cx":circle_x, "cy":circle_y,});
	} else {
		obj.arrPath = this.path(path1);
		obj.circle=canvas_r.circle(circle_x, circle_y, 10).attr({fill: "#456", stroke: "none"});
			obj.circle.click(function(){
			alert(circle_x);
		});
		}

	return obj;
};
$(function () {
			var connections = [];
			var dragger = function () {
			if (!tool2_down) {
				this.ox = this.attr("x");
				this.oy = this.attr("y");
				this.animate({ "fill-opacity": .2 }, 500);
			}
			};
			var move = function (dx, dy) {
			if (!tool2_down) {
				var att = { x: this.ox + dx, y: this.oy + dy };
				this.attr(att);
				$("#test" + this.id).offset({ top: this.oy + dy + 10, left: this.ox + dx + 10 });
				for (var i = connections.length; i--; ) {
					r.drawArr(connections[i]);
				}
			}
			};
			var up = function () {
				if (!tool2_down) {
			this.animate({ "fill-opacity": 0 }, 500);
			}
			};

			//draw a canvas
			var window_x=$(window).width();
			var window_y=$(window).height();
			var r = Raphael("holder",window_x, window_y);
			canvas_r = r;
			var color = Raphael.getColor();


			var tools_rect = r.rect(0,window_y/2-100,80,160,4);
			var tool2_down = false;
			var from_object;
			var to_object;
			//draw a rect for rect
			tool1=r.rect(10, window_y/2-80, 60, 40, 4);
			tool1.attr({ fill: "#fff", stroke: color,  "stroke-width": 2,});
			var butt_text = r.text(tool1.attrs.x+30,tool1.attrs.y+20,"tools").attr("font", "17px 'Arial'","fill","#000");
			//draw a tools for line
			tool2=r.rect(10, window_y/2, 60, 40, 4);
			tool2.attr({ fill: "#fff", stroke: color, "stroke-width": 2});
			var butt_text = r.text(tool2.attrs.x+30,tool2.attrs.y+20,"-->").attr("font", "17px 'Arial'","fill","#000");			
		
			tool1.click(function(){
						var new_rect = r.rect(100, window_y/2+100, 60, 40, 4);
						new_rect.attr({ fill: "#fff", stroke: color,  "stroke-width": 2,});
							new_rect.mousedown(function(){
							if (tool2_down) {
								from_object = new_rect;
								}
							});
							new_rect.mouseup(function(){
							if (tool2_down) {
								to_object = new_rect;
								connections.push(r.drawArr({ obj1: from_object, obj2: to_object }));
								tool2_down = false;
								tool2.attr({ fill: "#fff", stroke: color, "stroke-width": 2});
								}
							});
						//当两个工具按钮都没有按下的时候运行拖动飘逸
							new_rect.drag(move, dragger, up);
					
			});

			tool2.click(function(){
					if(!tool2_down)
					{
						tool2_down = true;
						tool2.attr({ fill: "red", stroke: "#f0f"});
					} else	{
						this.attr({ fill: "#fff", stroke: color, "stroke-width": 2 });
						tool2_down = false;
					}
			});			 

});
</script>
<style type="text/css" media="screen">
#holder
{
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
position: absolute;
		  z-index:999;
}
test
{
position: absolute;
width:80px;
height:30px;
top:0px;
	z-index:0;
}
p
{
	text-align: center;
}
</style>
</head>
<body>
<div id="holder">

</div>
<div id="test"  class="test"></div>
<div id="test1" class="test">
</div>
</body>
</html>
